<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的世界MOD百科 - 审核管理</title>
    <!-- 引入Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- 引入Font Awesome图标库 -->
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <!-- Tailwind配置 - 保持我的世界主题色 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#557A46', // 草方块绿
                        secondary: '#B87333', // 木头棕
                        accent: '#E67E22', // 金块黄
                        dark: '#1E293B', // 石头灰
                        light: '#F8FAFC', // 雪块白
                    },
                    boxShadow: {
                        'minecraft': '0 4px 0 rgba(0, 0, 0, 0.25)',
                    },
                    backgroundImage: {
                        'minecraft-bg': "url('https://picsum.photos/id/137/1920/1080')",
                    }
                },
            }
        }
    </script>
    <!-- 自定义工具类 -->
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .text-shadow {
                text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
            }
            .btn-minecraft {
                @apply bg-primary hover:bg-primary/80 text-white font-bold py-2 px-4 rounded-none shadow-minecraft transition-all duration-150 transform hover:-translate-y-1 hover:shadow-lg;
            }
            .card-minecraft {
                @apply bg-dark/80 text-light rounded-none border-2 border-primary/30 shadow-minecraft hover:shadow-lg transition-all duration-300 hover:-translate-y-1;
            }
            .nav-link {
                @apply text-light hover:text-accent transition-colors duration-200 font-bold;
            }
        }
    </style>
</head>
<body class="bg-minecraft-bg bg-fixed bg-cover font-inter min-h-screen flex flex-col">
<!-- 导航栏 -->
<nav class="bg-dark/90 text-white shadow-lg sticky top-0 z-50 backdrop-blur-sm">
    <div class="container mx-auto px-4 py-3">
        <div class="flex justify-between items-center">
            <!-- 网站标识 -->
            <div class="flex items-center space-x-2">
                <i class="fa fa-cubes text-accent text-2xl"></i>
                <h1 class="text-xl md:text-2xl font-bold tracking-wider">我的世界MOD百科 - 管理员模块</h1>
            </div>

            <!-- 桌面端导航链接 -->
            <div class="hidden md:flex items-center space-x-8">
                <a href="#" class="nav-link relative group">首页
                    <span class="absolute w-0 h-0.5 bg-accent bottom-0 left-0 group-hover:w-full transition-all duration-300"></span>
                </a>
                <a href="#" class="nav-link relative group">下载管理
                    <span class="absolute w-0 h-0.5 bg-accent bottom-0 left-0 group-hover:w-full transition-all duration-300"></span>
                </a>
                <a href="#" class="nav-link relative group">详细信息
                    <span class="absolute w-0 h-0.5 bg-accent bottom-0 left-0 group-hover:w-full transition-all duration-300"></span>
                </a>
                <a href="#" class="nav-link relative group">MOD管理
                    <span class="absolute w-0 h-0.5 bg-accent bottom-0 left-0 group-hover:w-full transition-all duration-300"></span>
                </a>
                <a href="#" class="nav-link relative group">评论管理
                    <span class="absolute w-0 h-0.5 bg-accent bottom-0 left-0 group-hover:w-full transition-all duration-300"></span>
                </a>
                <a href="#" class="nav-link relative group text-accent">审核管理
                    <span class="absolute w-full h-0.5 bg-accent bottom-0 left-0"></span>
                </a>
            </div>

            <!-- 移动端菜单按钮 -->
            <div class="md:hidden">
                <button id="menu-toggle" class="text-white focus:outline-none">
                    <i class="fa fa-bars text-xl"></i>
                </button>
            </div>
        </div>

        <!-- 移动端导航菜单 - 默认隐藏 -->
        <div id="mobile-menu" class="hidden mt-4 pb-2 md:hidden">
            <a href="#" class="block py-2 nav-link">首页</a>
            <a href="#" class="block py-2 nav-link">下载管理</a>
            <a href="#" class="block py-2 nav-link">详细信息</a>
            <a href="#" class="block py-2 nav-link">MOD管理</a>
            <a href="#" class="block py-2 nav-link">评论管理</a>
            <a href="#" class="block py-2 nav-link text-accent">审核管理</a>
        </div>
    </div>
</nav>

<!-- 英雄区域 -->
<header class="relative h-[60vh] flex items-center justify-center overflow-hidden">
    <div class="absolute inset-0 bg-dark/50 backdrop-blur-sm z-10"></div>
    <div class="container mx-auto px-4 z-20 text-center">
        <h1 class="text-[clamp(2rem,4vw,3rem)] font-bold text-white mb-6 text-shadow">审核管理</h1>
        <p class="text-[clamp(1rem,2vw,1.25rem)] text-light/90 max-w-2xl mx-auto">对新提交的MOD、评论和开发者信息进行审核操作</p>
    </div>
</header>

<!-- 主要内容区域 -->
<main class="py-16 bg-dark/80 backdrop-blur-sm">
    <div class="container mx-auto px-4">
        <!-- 审核统计卡片 -->
        <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-10">
            <!-- 待审核统计 -->
            <div class="card-minecraft p-6 text-center">
                <div class="text-4xl text-accent mb-2"><i class="fa fa-clock-o"></i></div>
                <h3 class="text-xl font-bold text-white mb-2">待审核项目</h3>
                <p class="text-3xl font-bold text-white">12</p>
            </div>

            <!-- 今日已通过统计 -->
            <div class="card-minecraft p-6 text-center">
                <div class="text-4xl text-green-500 mb-2"><i class="fa fa-check"></i></div>
                <h3 class="text-xl font-bold text-white mb-2">今日已通过</h3>
                <p class="text-3xl font-bold text-white">8</p>
            </div>

            <!-- 今日已拒绝统计 -->
            <div class="card-minecraft p-6 text-center">
                <div class="text-4xl text-red-500 mb-2"><i class="fa fa-times"></i></div>
                <h3 class="text-xl font-bold text-white mb-2">今日已拒绝</h3>
                <p class="text-3xl font-bold text-white">3</p>
            </div>
        </div>

        <!-- 审核标签页导航 -->
        <div class="border-b border-primary/30 mb-6">
            <div class="flex flex-wrap">
                <button class="px-6 py-3 text-white font-bold border-b-2 border-accent">待审核MOD</button>
                <button class="px-6 py-3 text-light/70 hover:text-white">待审核评论</button>
                <button class="px-6 py-3 text-light/70 hover:text-white">待审核开发者</button>
            </div>
        </div>

        <!-- 待审核MOD列表 -->
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <!-- 待审核MOD 1 -->
            <div class="card-minecraft overflow-hidden">
                <div class="relative h-40">
                    <img src="https://picsum.photos/id/239/600/400" alt="太空探索MOD" class="w-full h-full object-cover">
                    <div class="absolute top-3 right-3 bg-yellow-600 text-white text-xs font-bold px-2 py-1">待审核</div>
                </div>
                <div class="p-6">
                    <h3 class="text-xl font-bold text-white mb-2">太空探索MOD</h3>
                    <p class="text-light/70 text-sm mb-4">添加太空维度和星际旅行系统，玩家可以探索不同的星球，收集独特资源并建造太空站</p>

                    <!-- MOD标签 -->
                    <div class="flex flex-wrap gap-2 mb-4">
                        <span class="bg-primary/30 text-light/90 text-xs px-2 py-1 rounded">太空</span>
                        <span class="bg-primary/30 text-light/90 text-xs px-2 py-1 rounded">探索</span>
                        <span class="bg-primary/30 text-light/90 text-xs px-2 py-1 rounded">1.20.1</span>
                    </div>

                    <!-- 提交者信息 -->
                    <div class="mb-4">
                        <h4 class="text-white font-bold mb-2">提交者信息</h4>
                        <div class="flex items-center">
                            <img src="https://picsum.photos/id/91/100/100" alt="提交者头像" class="w-8 h-8 rounded-full mr-2">
                            <span class="text-light/80">星际旅行者团队</span>
                        </div>
                    </div>

                    <!-- 审核操作按钮 -->
                    <div class="flex justify-between gap-3">
                        <button class="btn-minecraft flex-1 bg-green-600 hover:bg-green-700">
                            <i class="fa fa-check mr-1"></i>通过
                        </button>
                        <button class="btn-minecraft flex-1 bg-red-600 hover:bg-red-700">
                            <i class="fa fa-times mr-1"></i>拒绝
                        </button>
                        <button class="btn-minecraft w-12">
                            <i class="fa fa-eye"></i>
                        </button>
                    </div>
                </div>
            </div>

            <!-- 待审核MOD 2 -->
            <div class="card-minecraft overflow-hidden">
                <div class="relative h-40">
                    <img src="https://picsum.photos/id/240/600/400" alt="农场物语MOD" class="w-full h-full object-cover">
                    <div class="absolute top-3 right-3 bg-yellow-600 text-white text-xs font-bold px-2 py-1">待审核</div>
                </div>
                <div class="p-6">
                    <h3 class="text-xl font-bold text-white mb-2">农场物语MOD</h3>
                    <p class="text-light/70 text-sm mb-4">添加多种农作物和养殖系统，包含季节性变化和自动化灌溉功能，丰富游戏中的农业玩法</p>

                    <!-- MOD标签 -->
                    <div class="flex flex-wrap gap-2 mb-4">
                        <span class="bg-primary/30 text-light/90 text-xs px-2 py-1 rounded">农业</span>
                        <span class="bg-primary/30 text-light/90 text-xs px-2 py-1 rounded">养殖</span>
                        <span class="bg-primary/30 text-light/90 text-xs px-2 py-1 rounded">1.19.2</span>
                    </div>

                    <!-- 提交者信息 -->
                    <div class="mb-4">
                        <h4 class="text-white font-bold mb-2">提交者信息</h4>
                        <div class="flex items-center">
                            <img src="https://picsum.photos/id/92/100/100" alt="提交者头像" class="w-8 h-8 rounded-full mr-2">
                            <span class="text-light/80">农夫John</span>
                        </div>
                    </div>

                    <!-- 审核操作按钮 -->
                    <div class="flex justify-between gap-3">
                        <button class="btn-minecraft flex-1 bg-green-600 hover:bg-green-700">
                            <i class="fa fa-check mr-1"></i>通过
                        </button>
                        <button class="btn-minecraft flex-1 bg-red-600 hover:bg-red-700">
                            <i class="fa fa-times mr-1"></i>拒绝
                        </button>
                        <button class="btn-minecraft w-12">
                            <i class="fa fa-eye"></i>
                        </button>
                    </div>
                </div>
            </div>

            <!-- 待审核MOD 3 -->
            <div class="card-minecraft overflow-hidden">
                <div class="relative h-40">
                    <img src="https://picsum.photos/id/241/600/400" alt="魔法生物MOD" class="w-full h-full object-cover">
                    <div class="absolute top-3 right-3 bg-yellow-600 text-white text-xs font-bold px-2 py-1">待审核</div>
                </div>
                <div class="p-6">
                    <h3 class="text-xl font-bold text-white mb-2">魔法生物MOD</h3>
                    <p class="text-light/70 text-sm mb-4">添加20种新的魔法生物，每种生物有独特的行为模式和掉落物，支持驯服和繁殖系统</p>

                    <!-- MOD标签 -->
                    <div class="flex flex-wrap gap-2 mb-4">
                        <span class="bg-primary/30 text-light/90 text-xs px-2 py-1 rounded">魔法</span>
                        <span class="bg-primary/30 text-light/90 text-xs px-2 py-1 rounded">生物</span>
                        <span class="bg-primary/30 text-light/90 text-xs px-2 py-1 rounded">1.18.2</span>
                    </div>

                    <!-- 提交者信息 -->
                    <div class="mb-4">
                        <h4 class="text-white font-bold mb-2">提交者信息</h4>
                        <div class="flex items-center">
                            <img src="https://picsum.photos/id/93/100/100" alt="提交者头像" class="w-8 h-8 rounded-full mr-2">
                            <span class="text-light/80">奇幻生物工作室</span>
                        </div>
                    </div>

                    <!-- 审核操作按钮 -->
                    <div class="flex justify-between gap-3">
                        <button class="btn-minecraft flex-1 bg-green-600 hover:bg-green-700">
                            <i class="fa fa-check mr-1"></i>通过
                        </button>
                        <button class="btn-minecraft flex-1 bg-red-600 hover:bg-red-700">
                            <i class="fa fa-times mr-1"></i>拒绝
                        </button>
                        <button class="btn-minecraft w-12">
                            <i class="fa fa-eye"></i>
                        </button>
                    </div>
                </div>
            </div>

            <!-- 待审核MOD 4 -->
            <div class="card-minecraft overflow-hidden">
                <div class="relative h-40">
                    <img src="https://picsum.photos/id/242/600/400" alt="未来科技MOD" class="w-full h-full object-cover">
                    <div class="absolute top-3 right-3 bg-yellow-600 text-white text-xs font-bold px-2 py-1">待审核</div>
                </div>
                <div class="p-6">
                    <h3 class="text-xl font-bold text-white mb-2">未来科技MOD</h3>
                    <p class="text-light/70 text-sm mb-4">引入高科技装备和能源系统，包含激光武器、能量护盾和自动化机器人，支持科技树解锁</p>

                    <!-- MOD标签 -->
                    <div class="flex flex-wrap gap-2 mb-4">
                        <span class="bg-primary/30 text-light/90 text-xs px-2 py-1 rounded">科技</span>
                        <span class="bg-primary/30 text-light/90 text-xs px-2 py-1 rounded">装备</span>
                        <span class="bg-primary/30 text-light/90 text-xs px-2 py-1 rounded">1.20.1</span>
                    </div>

                    <!-- 提交者信息 -->
                    <div class="mb-4">
                        <h4 class="text-white font-bold mb-2">提交者信息</h4>
                        <div class="flex items-center">
                            <img src="https://picsum.photos/id/94/100/100" alt="提交者头像" class="w-8 h-8 rounded-full mr-2">
                            <span class="text-light/80">未来工程师团队</span>
                        </div>
                    </div>

                    <!-- 审核操作按钮 -->
                    <div class="flex justify-between gap-3">
                        <button class="btn-minecraft flex-1 bg-green-600 hover:bg-green-700">
                            <i class="fa fa-check mr-1"></i>通过
                        </button>
                        <button class="btn-minecraft flex-1 bg-red-600 hover:bg-red-700">
                            <i class="fa fa-times mr-1"></i>拒绝
                        </button>
                        <button class="btn-minecraft w-12">
                            <i class="fa fa-eye"></i>
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <!-- 分页控件 -->
        <div class="mt-10 text-center">
            <div class="inline-flex">
                <button class="btn-minecraft mx-1 px-3 py-1">1</button>
                <button class="btn-minecraft mx-1 px-3 py-1">2</button>
                <button class="btn-minecraft mx-1 px-3 py-1">3</button>
                <span class="text-light mx-2 my-auto">...</span>
                <button class="btn-minecraft mx-1 px-3 py-1">5</button>
            </div>
        </div>
    </div>
</main>

<!-- 页脚 -->
<footer class="bg-dark/90 text-white py-8">
    <div class="container mx-auto px-4 text-center">
        <p>&copy; 2024 我的世界MOD百科 - 管理员模块. 保留所有权利.</p>
    </div>
</footer>

<!-- 移动端菜单切换脚本 -->
<script>
    const menuToggle = document.getElementById('menu-toggle');
    const mobileMenu = document.getElementById('mobile-menu');
    menuToggle.addEventListener('click', () => {
        mobileMenu.classList.toggle('hidden');
    });
</script>
</body>
</html>